<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: snzo.chen
 * @Date: 2023-11-21 09:50:52
 * @LastEditors: snzo.chen
 * @LastEditTime: 2023-12-20 16:38:56
-->
<template>
  <a-form :model="formState" name="basic">
    <a-form-item
      label="商品名称"
      name="productName"
      :rules="[{ required: true, message: '请输入商品名称!' }]"
    >
      <a-input v-model:value="formState.productName" />
    </a-form-item>
    <a-form-item
      label="归属类别"
      name="ticketType"
      :rules="[{ required: true, message: '请选择归属类别!' }]"
    >
      <a-select
        allowClear
        v-model:value="formState.ticketType"
        placeholder="归属类别"
        style="width: 120px"
      >
        <template v-for="menuItem in props.menuOfData">
          <template v-if="menuItem.state === 1">
            <a-select-option :value="menuItem.id">{{
              menuItem.menuName
            }}</a-select-option>
          </template>
        </template>
      </a-select>
    </a-form-item>
    <a-form-item
      label="最大分值"
      name="maxPoint"
      :rules="[{ required: true, message: '请输入最大分值!' }]"
    >
      <a-input
        v-model:value="formState.maxPoint"
        placeholder="请输入最大分值（学分/积分）"
      />
    </a-form-item>
    <a-form-item label="详情" name="detail">
      <RichTextEditor
        ref="editorRef"
        :editConfig="{ height: 300 }"
        v-model:initialValue="formState.detail"
      />
    </a-form-item>
    <a-form-item label="状态" name="isOpen">
      <a-switch
        :checked="formState.isOpen === 1"
        checked-children="开启"
        un-checked-children="关闭"
        @click="(checked) => switchClick(checked)"
      />
    </a-form-item>
  </a-form>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
const props = defineProps({
  menuOfData: {
    type: Array<API.TicketMenu>,
  },
  formData: {
    type: Object,
    default(rawProps) {
      return rawProps;
    },
  },
});
const formState = reactive(props.formData);
const switchClick = (checked) => {
  formState.isOpen = checked ? 1 : 0;
};

defineExpose({
  formState,
});
</script>
